import React, { Component } from 'react';
import { connect } from 'dva';
import styles from './violationCases.less';
import { Tree, Input, Button, DatePicker, Pagination, Table, Icon, Select } from 'antd';

@connect(({ regulatoryLetters }) => ({
  jghParamData: regulatoryLetters.jghParamData,
  jghListData: regulatoryLetters.jghListData,
}))
class violationCases extends Component {
  state = {
    regulatory_type_id: '',
    violation_type_id: '',
    keyword: '',
    company_code: '',
    punishment_identity: '',
    averment_id: '',
    start_time: '',
    end_time: '',
    market_id: '',
    industry: '',
    area: '',
    regulatory_org_id: '',
    sort: 'desc',
    page_num: 1,
    page_size: 10,
    totalCount: 0,
    ifShowMoreQuery: false,
    listData: {
      columns: [
        {
          title: '序号',
          dataIndex: 'key',
          key: 'key',
          render: (text, record, index) => <span> {index + 1} </span>,
        },
        {
          title: '公司',
          dataIndex: 'stock_code',
          key: 'stock_code',
          render: (stockCode, record) => (
            <p className={styles.companyName}>
              <p>{stockCode}</p>
              <p>{record.stock_name}</p>
            </p>
          ),
        },
        {
          title: '标题',
          dataIndex: 'title',
          key: 'title',
          render: (title, record) => (
            <p className={styles.titleText}>
              <a href="javascript:void(0)">{title}</a>
            </p>
          ),
          width: '20%',
        },
        {
          title: '违规类型',
          dataIndex: 'violation_type_name',
          key: 'violation_type_name',
          width: '20%',
        },
        {
          title: '处理人',
          dataIndex: 'regulatory_org_name',
          key: 'regulatory_org_name',
        },
        {
          title: '处罚对象',
          dataIndex: 'involved_party',
          key: 'involved_party',
          width: '10%',
        },
        {
          title: '更新时间',
          dataIndex: 'published_time',
          key: 'published_time',
        },
      ],
    },
  };

  //遍历json绘制出tree结构

  getListData(that) {
    // console.log(that);
    let { dispatch } = that.props;
    dispatch({
      type: 'regulatoryLetters/getList',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
        regulatory_type_id: that.state.regulatory_type_id,
        violation_type_id: that.state.violation_type_id,
        keyword: that.state.keyword,
        company_code: that.state.company_code,
        punishment_identity: that.state.punishment_identity,
        averment_id: that.state.averment_id,
        start_time: that.state.start_time,
        end_time: that.state.end_time,
        market_id: that.state.market_id,
        industry: that.state.industry,
        area: that.state.area,
        regulatory_org_id: that.state.regulatory_org_id,
        sort: that.state.sort,
        page_num: that.state.page_num,
        page_size: that.state.page_size,
      },
    });
  }

  componentDidMount() {
    let { dispatch } = this.props;
    this.getListData(this);

    dispatch({
      type: 'regulatoryLetters/getParam',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });
  }

  render() {
    const that = this;
    let treeContent = [];
    let totalCount = 0;
    const DirectoryTree = Tree.DirectoryTree;
    const { TreeNode } = Tree;
    const Search = Input.Search;
    let { jghParamData, jghListData } = this.props;
    let ifShowMoreQuery = this.state.ifShowMoreQuery;
    const pager = {
      total: jghListData.total_count,
      current: this.state.page_num,
      pageSize: this.state.page_size,
      onChange: page => {
        that.setState({ page_num: page }, () => {
          that.getListData(that);
        });
      },
    };
    // 树形控件点击事件
    let onSelect = (selectedKeys, info) => {
      let selKeys = [selectedKeys];
      for (let i = 0; i < info.node.props.children.length; i++) {
        selKeys.push(info.node.props.children[i].key);
      }
      this.setState(
        {
          page_num: 1,
          violation_type_id: selKeys.join(' '),
        },
        () => {
          this.getListData(this);
        }
      );
    };

    // 切换高级
    let toggleMoreQuery = () => {
      this.setState({
        ifShowMoreQuery: !this.state.ifShowMoreQuery,
      });
    };

    let mapData = children => {
      if (children && Array.isArray(children)) {
        return children.map(ele => {
          if (ele.elemeTreeNodeChildList && Array.isArray(ele.elemeTreeNodeChildList)) {
            return (
              <TreeNode title={ele.treeNodeLabel} key={ele.id}>
                {mapData(ele.elemeTreeNodeChildList)}
              </TreeNode>
            );
          } else {
            return <TreeNode title={ele.treeNodeLabel} key={ele.id} />;
          }
        });
      }
      return [];
    };

    let optionArray = {
      punishment_identity_list: [
        <Option value="" key="0">
          全部
        </Option>,
      ],
      averment_list: [
        <Option value="" key="0">
          全部
        </Option>,
      ],
      market_list: [
        <Option value="" key="0">
          全部
        </Option>,
      ],
      industry_list: [
        <Option value="" key="0">
          全部
        </Option>,
      ],
      area_list: [
        <Option value="" key="0">
          全部
        </Option>,
      ],
      regulatory_org_list: [
        <Option value="" key="0">
          全部
        </Option>,
      ],
    };
    if (jghParamData && jghParamData.data) {
      for (let i = 0; i < jghParamData.data.violation_type_list.length; i++) {
        let { treeNodeLabel, elemeTreeNodeChildList, id } = jghParamData.data.violation_type_list[
          i
        ];
        if (treeNodeLabel) {
          treeContent.push(
            <TreeNode title={treeNodeLabel} key={id}>
              {mapData(elemeTreeNodeChildList)}
            </TreeNode>
          );
        }
      }

      for (let i = 0; i < jghParamData.data.punishment_identity_list.length; i++) {
        optionArray.punishment_identity_list.push(
          <Option key={i} value={jghParamData.data.punishment_identity_list[i].id}>
            {jghParamData.data.punishment_identity_list[i].treeNodeLabel}
          </Option>
        );
      }

      for (let i = 0; i < jghParamData.data.averment_list.length; i++) {
        optionArray.averment_list.push(
          <Option key={i} value={jghParamData.data.averment_list[i].id}>
            {jghParamData.data.averment_list[i].treeNodeLabel}
          </Option>
        );
      }

      for (let i = 0; i < jghParamData.data.market_list.length; i++) {
        optionArray.market_list.push(
          <Option key={i} value={jghParamData.data.market_list[i].id}>
            {jghParamData.data.market_list[i].treeNodeLabel}
          </Option>
        );
      }

      for (let i = 0; i < jghParamData.data.industryList.length; i++) {
        optionArray.industry_list.push(
          <Option key={i} value={jghParamData.data.industryList[i]}>
            {jghParamData.data.industryList[i]}
          </Option>
        );
      }

      for (let i = 0; i < jghParamData.data.area_list.length; i++) {
        optionArray.area_list.push(
          <Option key={i} value={jghParamData.data.area_list[i]}>
            {jghParamData.data.area_list[i]}
          </Option>
        );
      }

      for (let i = 0; i < jghParamData.data.regulatory_org_list.length; i++) {
        optionArray.regulatory_org_list.push(
          <Option key={i} value={jghParamData.data.regulatory_org_list[i].id}>
            {jghParamData.data.regulatory_org_list[i].treeNodeLabel}
          </Option>
        );
      }
    }

    // 查询数据
    let queryData = value => {
      console.log(value);
    };

    // 渲染主要内容列表
    let renderList = () => {
      let result = [];

      if (jghListData) {
        result.push(
          <Table
            columns={this.state.listData.columns}
            dataSource={jghListData.data_list}
            pagination={pager}
            bordered
          />
        );
      }
      return result;
    };
    return (
      <div className={styles.childPageWrap}>
        <div className={styles.treeWrap}>
          <DirectoryTree onSelect={onSelect}>{treeContent}</DirectoryTree>
        </div>
        <div className={styles.listWrap}>
          <div className={styles.queryWrap}>
            <div className={styles.queryRow}>
              <Search
                placeholder="请输入关键词"
                enterButton="搜索"
                size="large"
                onSearch={queryData}
                className={styles.searchInput}
              />

              <Button
                type="primary"
                size={'large'}
                className={styles.toggleMoreQuery}
                onClick={toggleMoreQuery}
              >
                高级
                <Icon type={ifShowMoreQuery ? 'caret-up' : 'caret-down'} />
              </Button>
            </div>

            <div style={{ display: ifShowMoreQuery ? 'block' : 'none' }}>
              <div className={styles.queryRow}>
                <Select
                  size="large"
                  style={{ flex: 1 }}
                  showSearch
                  placeholder="请输入公司代码、简称"
                  onChange={val => {
                    this.setState({ company_code: val });
                  }}
                >
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="tom">Tom</Option>
                </Select>

                <Select
                  size="large"
                  style={{ flex: 1, margin: '0 10px' }}
                  placeholder="处罚对象身份"
                  onChange={val => {
                    this.setState({ punishment_identity: val });
                  }}
                >
                  {optionArray.punishment_identity_list}
                </Select>

                <Select
                  size="large"
                  style={{ flex: 1 }}
                  placeholder="申辩情况"
                  onChange={val => {
                    this.setState({ averment_id: val });
                  }}
                >
                  {optionArray.averment_list}
                </Select>
              </div>

              <div className={styles.queryRow}>
                <DatePicker
                  size="large"
                  style={{ flex: 1 }}
                  format="YYYY-MM-DD"
                  placeholder="请选择开始日期"
                  onChange={(val, dateString) => {
                    this.setState({ start_time: val });
                  }}
                />

                <DatePicker
                  size="large"
                  style={{ flex: 1, margin: '0 10px' }}
                  format="YYYY-MM-DD"
                  placeholder="请选择结束日期"
                  onChange={(val, dateString) => {
                    this.setState({ end_time: val });
                  }}
                />

                <Select
                  size="large"
                  style={{ flex: 1 }}
                  placeholder="所属板块"
                  onChange={val => {
                    this.setState({ market_id: val });
                  }}
                >
                  {optionArray.market_list}
                </Select>
              </div>

              <div className={styles.queryRow}>
                <Select
                  size="large"
                  style={{ flex: 1 }}
                  showSearch
                  placeholder="所属行业"
                  onChange={val => {
                    this.setState({ industry: val });
                  }}
                >
                  {optionArray.industry_list}
                </Select>

                <Select
                  size="large"
                  style={{ flex: 1, margin: '0 10px' }}
                  placeholder="所属地区"
                  onChange={val => {
                    this.setState({ area: val });
                  }}
                >
                  {optionArray.area_list}
                </Select>

                <Select
                  size="large"
                  style={{ flex: 1 }}
                  placeholder="监管机构"
                  onChange={val => {
                    this.setState({ regulatory_org_id: val });
                  }}
                >
                  {optionArray.regulatory_org_list}
                </Select>
              </div>
            </div>
          </div>

          {renderList()}
        </div>
      </div>
    );
  }
}

export default violationCases;
